<template>
   <div class="model">
      <div class="box">
         <div class="title">{{titleText}}</div>
         <div class="btn">
            <el-button type="danger" @click="_Determine">确定</el-button>
            <el-button type="info" @click="_cancel">取消</el-button>
         </div>
      </div>
   </div>
</template>

<script>
   import {lists} from '../../assets/util/util'

   export default {
      name: "model-box",
      data() {
         return {
            byId: '',
            dtermineName: '',
            cancelName: ''
         }
      },
      mounted() {
         this._initBody()
      },
      props: {
         titleText: {
            type: String,
            default() {
               return '确定要删除了?'
            }
         }
      },
      methods: {
         _initBody() {
            this.body = document.querySelector('body')
            this.body.style.overflow = 'hidden'
         },
         _cancel() {
            this.$emit(this.cancelName, false)
            lists.removeAttribute(this.body, 'style')
         },
         _Determine() {
            this.$emit(this.dtermineName, this.byId)
            lists.removeAttribute(this.body, 'style')
         },
         _getById({id, dtermineName, cancelName}) {
            console.log(dtermineName)
            this.byId = id
            if (dtermineName) {
               this.dtermineName = dtermineName
            }
            if (cancelName) {
               this.cancelName = cancelName
            }
         }
      }
   }
</script>

<style scoped lang="stylus">
   .model
      .box
         width 350px
         height 250px
         background white
         border-radius 20px
         .title
            margin-top 40px
            text-align center
            font-size 25px
            color #666666
         .btn
            box-sizing border-box
            padding 0 20px
            display flex
            justify-content space-between
            margin-top 100px
      display flex
      justify-content center
      align-items center
      top 0
      left 0
      right 0
      bottom 0
      z-index 1000
      background rgba(0,0,0,0.5)
      position fixed
</style>
